
<template>
  <time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
  </time>
<div :id>not id</div>
<div v-bind:id="ddd">bandid</div>
 <div :id="dynamicId">dynamic</div>
 <button :disabled="isButtonDisabled">Button</button>
 <div v-bind="objectOfAttrs">objectOfAttrs</div>
 <p>MSG: {{ msg }} <button @click="reverse">reverse</button></p>
 <button @click="count++">count:{{ count }}</button>
 <p>Using text interpolation: {{ rawHtml }}</p>
 <p>Using v-html directive: <span v-html="rawHtml"></span></p>

 <p v-if="seen">Now you see me</p>
 <p v-if="!seen">Now you  not see me</p>
 <p> <a v-bind:href="url"> baidu </a></p>
<!-- 简写 -->
<p><a :href="url"> baidu </a></p>
<!-- 动态参数-->
<a v-bind:[attributeName]="url"> ...111 </a>
<a v-on:click="doSomething"> ... </a> &nbsp; &nbsp; &nbsp; &nbsp;
<!-- 简写 -->
<a @click="doSomething"> ... </a> &nbsp; &nbsp; &nbsp; &nbsp;

<a @[action]="doSomething"> ... </a>

<form @submit.prevent="onSubmit">
  <!-- 表单内容 -->
  <button type="submit">Submit</button>
</form>

<div>{{ count1 }}</div>
<button @click="count1++">{{ count1 }}</button>

<button @click="increment">{{ count1 }}  3333</button>

</template>


<script>
import { ref } from 'vue'

const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value ++;
console.log(count.value)
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}
export default {
  setup(){
    const count1 = ref(1)
    function increment() {
      // 在 JavaScript 中需要 .value
      count1.value++
    }
    // 将 ref 暴露给模板
    return {
      count1,
      increment
    }

  },
  data() {
    return {
      date:new Date(),
      objectOfAttrs:objectOfAttrs,
      id:"did",
      ddd :"did2",
      dynamicId:"did3",
      count:0,
      isButtonDisabled:true,
      msg:"button",
      rawHtml:'<span style="color: red">This should be red.</span>',
      seen:false,
      url:"https://www.baidu.com",
      attributeName:"href",
      action:"click"
    };
  },
  methods: {
    formatDate(tine){ return tine},
    toTitleDate(date){ return '今天日期'},
    reverse() {
      this.msg  = this.msg.split("").reverse().join(""); //
    },
    doSomething(){
      //带颜色的打印
    console.log('%cThis is blue text with a yellow background', 'color: blue; background-color: yellow');
    },
     onSubmit(event) {
      // 在这里处理表单提交
      // 'event' 是原生的 DOM 事件对象
      console.log('Form submitted!');
      // 你可以进行表单验证、数据收集或其他操作
      // 如果需要，可以使用 axios 或 fetch 发送数据到服务器
    }
  }
};
//https://cn.vuejs.org/guide/essentials/template-syntax.html   pull test
</script>